<template>
  <div class="info">
    <div class="info-title">
      <div class="path">
        <span class="default btn">全部课程 \ {{ courseDetail.parent_name }} \ {{ courseDetail.child_name}} </span
        ><span class="current btn"> \ {{ courseDetail.title }}</span>
      </div>
      <div class="option">
        <div class="share btn">
          <img src="../../../../assets/image/onlineStudent/share-ico.png" alt="" />
          <div>分享</div>
        </div>
        <div class="favorite btn" @click="collect()">
          <img src="../../../../assets/image/onlineStudent/favorite-ico.png" alt="" />
          <div>收藏（1388）</div>
        </div>
      </div>
    </div>
    <div class="info-content">
      <div class="info-card" v-for="(item, index) in infoCard" :key="index">
        <div class="card">
          <div class="name">{{ item.name }}</div>
          <div class="introduce">{{ item.introduce }}</div>
        </div>
      </div>
    </div>
    <div class="info-footer">
      <div class="btn">立即购买</div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getCourseDetail();
  },
  data() {
    return {
      infoCard: [
        {
          name: '',
          introduce: '教学模式',
        },
        {
          name: '无限期',
          introduce: '课程有效时间至',
        },
        {
          name: '',
          introduce: '学习人数',
        },
        {
          name: '',
          introduce: '价格',
        },
      ],
      courseDetail:'',
    }
  },
  methods:{
    getCourseDetail(){
      this.$axios.post("/course/courseDetail", {
        school_dns:'testwo.admin.longde999.cn',
        id:this.$route.query.id,
        nature:this.$route.query.nature
      }).then(res => {
        if (res.code == 200) {
          this.courseDetail = res.data;
          this.infoCard[0].name = this.getmethod(this.courseDetail.method);
          this.infoCard[2].name = this.courseDetail.watch_num+'人';
          this.infoCard[3].name = '￥'+this.courseDetail.pricing;
        }
      });
    },
    getmethod(arr){
      let method = ['直播','录播','其他'];
      let m = '';
      for(let i in arr){
        m += method[arr[i]-1]+'+';
      }
      return m.substring(0,m.length-1);
    },
    collect(){
      this.$axios.post("/course/collect", {
        school_dns:'testwo.admin.longde999.cn',
        id:this.$route.query.id,
        nature:this.$route.query.nature
      }).then(res => {
        console.log(res);
      });
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/index.less';
.info {
  background: @baseBgColor;
  margin-bottom: 20px;
  .info-title {
    .flex(space-between);
    padding: 20px;
    color: #999999;
    border-bottom: 1px solid #E4E7ED;
    .path {
      .current {
        color: #27a4fe;
      }
    }
    .option {
      .flex();
      .share,
      .favorite {
        .flex('', center);
        margin-right: 10px;
        img {
          margin-right: 3px;
        }
      }
    }
  }
  .info-content,
  .info-card {
    .flex(center);
    padding: 20px;
  }
  .info-content {
    .info-card {
      .flex('', center);
      // padding: 0 40px;
      &:after {
        content: ' ';
        margin: 0 40px;
        width: 1px;
        height: 24px;
        background: #e4e7ed;
      }
      &:last-child::after {
        display: none;
      }
    }
    .card {
      // font-weight: 500;
      .name {
        font-size: 28px;
        color: #333333;
      }
      .introduce {
        font-size: 18px;
        color: #999999;
      }
    }
  }
  .info-footer {
    .flex(center);
    .btn {
      margin-bottom: 20px;
      padding: 7px 12px;
      font-size: 20px;
      color: #ffffff;
      background: #ea3553;
    }
  }
}
</style>
